<template>
  <view class="coupon_card" :class="state == 0 ? '' : 'lose'">
    <view class="card_content">
      <view class="content_left">
        <view class="img_box">
          <view
            class="img_title"
            :class="listData.discountType == '0' ? '' : 'min'"
            >{{ discount }}</view
          >
          <view class="img_condition">{{ listData?.useConditions }}</view>
        </view>
        <view class="title_box">
          <view class="title">{{ listData?.couponName }}</view>
          <view class="date">
            <text v-if="startTime !== '' && endTime !== ''">
              {{ startTime }}-{{ endTime }}
            </text></view
          >
        </view>
      </view>
      <view class="content_right">
        <view class="btn" v-if="state==0" hover-class="active" @tap="operateClcik"
          >立即使用</view
        >
		<view class="btn" v-else
		  >不可使用</view
		>
      </view>
    </view>
    <up-collapse accordion :border="false">
      <up-collapse-item :isLink="false" :border="false">
        <template #title>
          <view class="slot_title">
            <view class="slot_left">
              使用规则
              <up-icon name="arrow-down-fill" :size="rpx2px(15)"></up-icon>
            </view>
            <view>
              <text>
                <!-- 剩余：{{listData?.yuNumber}}/{{ listData?.pushNumber }} 张 -->
                剩余：{{ listData?.yuNumber }} 张
              </text>
            </view>
          </view>
        </template>
        <!-- <text>{{ listData?.details }}</text> -->
        <up-parse :content="listData?.details"></up-parse>
      </up-collapse-item>
    </up-collapse>
  </view>
</template>

<script setup>
import { px2Rpx, rpx2px } from "@/utils/utils";
import { customNav } from "@/utils/customNav";
import { defineProps, computed,defineEmits } from "vue";
const props = defineProps({
  state: {
    type: Number,
  },
  listData: {
    type: Object,
  },
});
const emits = defineEmits(["on-clikc"])
const discount = computed(() => {
  let text = "";
  if (props.listData.discountType == "0") {
    text = `${props.listData.discount *10}折`;
  } else {
    let num = props.listData.fullSub.split(",");
    text = `满${num[0]}减${num[1]}`;
  }
  return text;
});
const startTime = computed(() => {
  const dataList = props.listData.startTime
    ? props.listData.startTime.split(" ")[0]
    : "";
  console.log("表格页面", dataList);
  return dataList;
});
const endTime = computed(() => {
  const dataList = props.listData.endTime
    ? props.listData.endTime.split(" ")[0]
    : "";
  console.log("表格页面", dataList);
  return dataList;
});
function operateClcik() {
 if (props.state == 0 && props.listData?.allowed == "0") {
  emits("on-clikc",props.listData)
  } else {
    uni.showToast({ title: "目前无法使用", duration: 2000, icon: "none" });
  }
}
</script>

<style lang="less" scoped>
.coupon_card {
  margin: 0 auto;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  width: 85vw;
  background-color: #f0f1f5;
  border-radius: 8rpx;
  .card_content {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background: @user-certificate no-repeat;
    background-size: 100% 100%;
    .content_left {
      display: flex;
      flex-flow: row nowrap;
      .img_box {
        width: 150rpx;
        height: 175rpx;
        text-align: center;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-content: center;
        margin-right: 20rpx;
        color: #5fb684;
        .img_title {
          width: 80%;
          font-size: 50rpx;
          font-weight: 500;
          &.min {
            font-size: 35rpx;
          }
        }
        .img_condition {
          width: 80%;
          font-size: @font-size-23;
        }
      }
      .title_box {
        height: 175rpx;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-evenly;
        .title {
          font-size: @font-size-31;
          font-weight: 500;
        }
        .date {
          font-size: @font-size-23;
          color: @color-grey;
        }
      }
    }
    .content_right {
      width: 175rpx;
      height: 175rpx;
      background: @user-certificate-right no-repeat;
      background-size: 100% 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-content: center;
      .btn {
        width: 104rpx;
        height: 37rpx;
        border-radius: 5rpx;
        padding: 0;
        line-height: 37rpx;
        border: 0;
        font-size: @font-size-23;
        background-color: transparent;
        color: @color-font;
        font-weight: 400;
        margin: 10rpx 0;
        text-align: center;
        background: @user-certificate-btn no-repeat;
        background-size: 100% 100%;
        &.active {
          background: @user-certificate-btn-active no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  &.lose {
    .card_content {
      .content_left {
        .img_box {
          color: @color-grey;
        }
        .title_box {
          color: @color-grey;
        }
      }
      .content_right {
        background: @user-certificate-lose no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.slot_title {
  width: 74vw;
  color: @color-grey;
  font-size: @font-size-23;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  .slot_left {
    display: flex;
    flex-flow: row nowrap;
  }
}
</style>